//导入共享数据包
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

// pages/home/home.js
Page({

    //共享数据相关配置
    options: {
        styleIsolation: 'shared'
    },

    behaviors: [storeBindingsBehavior],

    //引入需要的共享数据
    storeBindings: {
        store,
        fields: {
            articleDto: 'articleDto'
        },
        actions: {
            updateArticleDto: 'updateArticleDto'
        }
    },

    /**
     * 页面的初始数据
     */
    data: {
        //文章列表
        articleList: [],

        //分页参数
        current: 1,
        size: 12,
        total: 0,
        info: String,
        //节流阀
        isLoading: false,

        //文章详情dto
        articleDto: {},

        //文章搜索
        isSearching: false,
        from: 0,
        searchContent: null,
        articleSearchList: [],

        //文章搜索自动补全
        articleCompletion: []
    },

    //文章搜索
    onSearchClick() {

        //设置节流阀和搜索
        this.setData({
            isLoading: true,
            isSearching: true
        })

        //展示加载效果
        wx.showLoading({
          title: '搜索中...',
        })

        wx.request({
            url: `${store.programURL}/article/searchArticle`,
            method: 'POST',
            data: {
                from : this.data.from,
                size: this.data.size,
                content: this.data.searchContent
            },
            success: (res) => {
                this.setData({
                    articleSearchList: [...this.data.articleSearchList, ...res.data.data.records],
                  total: res.data.data.total
                })
            },
            complete:() => {
              //隐藏loading效果
              wx.hideLoading()
              //更新节流阀
              this.setData({isLoading: false})
            }
        })
    },

    //监听文章搜索框
    onSearchChange(e) {
        wx.request({
            url: `${store.programURL}/article/completionArticleSearch?content=${e.detail}`,
            method: 'POST',
            success: (res) => {
                this.setData({
                    articleCompletion: res.data.data
                })
            }
        })
        this.setData({
            searchContent: e.detail,
            from: 0,
            total: 0,
            articleSearchList: []
          });
    },

    //导航到文章详情页
    navigateToArticle(e) {
        //更新全局共享文章数据，传递给文章详情页使用
        this.updateArticleDto(e.target.dataset.article)
        wx.navigateTo({
          url: '/pages/aticleContent/articleContent',
        })
    },

    //加载文章
    loadArticle(cb) {
        //设置节流阀
        this.setData({isLoading: true})

        //展示加载效果
        wx.showLoading({
          title: '数据加载中...',
        })

        //请求后端
        wx.request({
          url: `${store.programURL}/article/load`,
          method: 'POST',
          data: {
              current : this.data.current,
              size: this.data.size,
              info: this.data.info
          },
          success:(res) => {
              this.setData({
                articleList: [...this.data.articleList, ...res.data.data.records],
                total: res.data.data.total
              })
          },
          complete:() => {
            //隐藏loading效果
            wx.hideLoading()
            //更新节流阀
            this.setData({isLoading: false})
          }
        })
        cb && cb()
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        //调用加载文章方法
        this.loadArticle()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        //判断节流阀
        if(this.data.isLoading) return

        //重置关键数据
        this.setData({
            current: 1,
            size: 12,
            total: 0,
            articleList: [],
            searchContent: null,
            isSearching: false,
            from: 0,
            articleSearchList: []
        })

        /*
        这里参考了黑马老师的写法，在加载文章方法中手写了一个回调函数
        为了让数据加载完成就把下拉动作取消，如果不这样会导致数据加载
        完了，下拉框却还没上去
        */
        this.loadArticle(() => {
            wx.stopPullDownRefresh()
        })
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

        //判断是否是搜索文章
        if(this.data.isSearching) {

            //判断是否还有下一页数据
            if(this.data.from >= this.data.total) {
                return wx.showToast({
                    title: '没有更多文章了'
                  })
            }

            //判断节流阀
            if(this.data.isLoading) return

            this.setData({
                from: this.data.from + this.data.size
            })
            this.onSearchClick()

            return
        }

        //判断是否还有下一页数据
        if(this.data.current * this.data.size >= this.data.total) {
            return wx.showToast({
              title: '没有更多文章了'
            })
        }

        //判断节流阀
        if(this.data.isLoading) return
        this.setData({
            current: this.data.current + 1
        })

        this.loadArticle()
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})